import React, { useEffect } from 'react';
import Sunecharts from '../../../component/Sunecharts';
import * as echarts from 'echarts';
import './nowdata.scss';
function Nowdate(props) {
    useEffect(() => {
        var totalRegister = echarts.init(document.querySelector('#totalRegister'));
        var totalMoney = echarts.init(document.querySelector('#total-money'));
        var addtotalRegister = echarts.init(document.querySelector('#addRegister'));
        var totalNum = echarts.init(document.querySelector('#total-num'));
        // 注册
        let Register = {
            backgroundColor: "#05224d",
            tooltip: { trigger: 'axis'},
            grid: {
                top: '8%',
                left: '1%',
                right: '1%',
                bottom: '8%',
                containLabel: true,
            },
            legend: {
                itemGap: 50,
                data: ['注册总量', '最新注册量'],
                textStyle: {
                    color: '#f9f9f9',
                    borderColor: '#fff'
                },
            },
            xAxis: [{
                type: 'category',
                boundaryGap: true,
                axisLine: { //坐标轴轴线相关设置。数学上的x轴
                    show: true,
                    lineStyle: {
                        color: '#f9f9f9'
                    },
                },
                axisLabel: { //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: '#d1e6eb',
                        margin: 15,
                    },
                },
                axisTick: {
                    show: false,
                },
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月',],
            }],
            yAxis: [{
                type: 'value',
                min: 0,
                // max: 140,
                splitNumber: 7,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#0a3256'
                    }
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    margin: 20,
                    textStyle: {
                        color: '#d1e6eb',

                    },
                },
                axisTick: {
                    show: false,
                },
            }],
            series: [{
                name: '注册总量',
                type: 'line',
                // smooth: true, //是否平滑曲线显示
                // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
                showAllSymbol: true,
                symbol: 'emptyCircle',
                symbolSize: 6,
                lineStyle: {
                    normal: {
                        color: "#28ffb3", // 线条颜色
                    },
                    borderColor: '#f0f'
                },
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#fff',
                    }
                },
                itemStyle: {
                    normal: {
                        color: "#28ffb3",

                    }
                },
                tooltip: {
                    show: false
                },
                areaStyle: { //区域填充样式
                    normal: {
                        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(0,154,120,1)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(0,0,0, 0)'
                        }
                        ], false),
                        shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
                        shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                    }
                },
                data: [393, 438, 485, 631, 689, 824, 987]
            }, {
                name: '最新注册量',
                type: 'bar',
                barWidth: 20,
                tooltip: {
                    show: false
                },
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#fff',
                    }
                },
                itemStyle: {
                    normal: {
                        // barBorderRadius: 5,
                        // color: new echarts.graphic.LinearGradient(
                        //     0, 0, 0, 1,
                        //     [{
                        //             offset: 0,
                        //             color: '#14c8d4'
                        //         },
                        //         {
                        //             offset: 1,
                        //             color: '#43eec6'
                        //         }
                        //     ]
                        // )
                        color: function (params) {
                            var colorList = ['#0ec1ff', '#10cdff', '#12daff', '#15ebff', '#17f8ff', '#1cfffb', '#1dfff1'];
                            return colorList[params.dataIndex];
                        }
                    }
                },
                data: [200, 382, 102, 267, 186, 315, 316]
            }]
        };
        // 支付
        let Money = {
            title: {
                text: '今日支付金额(元)',
                textStyle: {
                    fontSize: 25,
                    fontWeight: 'normal',
                    color: '#fff',
                },
                x: 'center'
            },
            backgroundColor: "#05224d",
            tooltip: {trigger: 'axis'},
            grid: {
                top: '8%',
                left: '1%',
                right: '1%',
                bottom: '8%',
                containLabel: true,
            },
            xAxis: [{
                type: 'category',
                boundaryGap: true,
                axisLine: { //坐标轴轴线相关设置。数学上的x轴
                    show: true,
                    lineStyle: {
                        color: '#f9f9f9'
                    },
                },
                axisLabel: { //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: '#d1e6eb',
                        margin: 15,
                    },
                },
                axisTick: {
                    show: false,
                },
                data: ['00', '02', '04', '06', '08', '10', '12', '14', '16', '18', '20', '22'],
            }],
            yAxis: [{
                type: 'value',
                min: 0,
                // max: 140,
                splitNumber: 7,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#0a3256'
                    }
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    margin: 20,
                    textStyle: {
                        color: '#d1e6eb',

                    },
                },
                axisTick: {
                    show: false,
                },
            }],
            series: [{
                name: '注册总量',
                type: 'line',
                smooth: true, //是否平滑曲线显示
                // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
                showAllSymbol: true,
                symbol: 'emptyCircle',
                symbolSize: 10,
                lineStyle: {
                    normal: {
                        color: "#28ffb3", // 线条颜色
                    },
                    borderColor: '#f0f'
                },
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#fff',
                    }
                },
                itemStyle: {
                    normal: {
                        color: "#28ffb3",

                    }
                },
                tooltip: {
                    show: false
                },
                areaStyle: { //区域填充样式
                    normal: {
                        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(0,154,120,1)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(0,0,0, 0)'
                        }
                        ], false),
                        shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
                        shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                    }
                },
                data: [150, 200, 270, 300, 240, 250, 348, 345, 234, 543, 167, 424]
            }

            ]
        };
        // 累计支付
        let result = {
            total: 17289,
            value: 14638,
            color: '#01EAFF'
        }
        result.rate = result.value / result.total.toFixed(4);
        let echartData = [
            {
                name: '数量',
                value: result.value,
                itemStyle: {
                    normal: {
                        color: result.color,
                    },
                },
            },
            {
                name: '剩下',
                value: (result.total - result.value),
                itemStyle: {
                    normal: {
                        color: 'rgba(31, 110, 255, 0)',
                    },
                },
            },
        ];
        let echartData2 = [
            {
                name: '数量',
                value: (result.total - result.value),
                itemStyle: {
                    normal: {
                        color: 'rgba(31, 110, 255, .4)',
                    },
                },
            },
            {
                name: '剩下',
                value: result.value,
                itemStyle: {
                    normal: {
                        color: 'rgba(31, 110, 255, 0)',
                    },
                },
            },
        ];
        let totalPayment = {

            title: [
                {
                    text: '支付总额',
                    x: 'center',
                    top: '39%',
                    textStyle: {
                        color: '#fff',
                        fontSize: 24,
                        fontWeight: '100',
                    },
                },
                {
                    text: '10290',
                    x: 'center',
                    top: '50%',
                    textStyle: {
                        fontSize: 50,
                        color: '#00f0ff',
                        foontWeight: '500',
                    },
                },
            ],
            polar: {
                radius: ['44%', '50%'],
                center: ['50%', '50%'],
            },
            angleAxis: {
                max: 100,
                show: false,
            },
            radiusAxis: {
                type: 'category',
                show: true,
                axisLabel: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
            },
            series: [
                {
                    type: 'pie',
                    startAngle: 90,
                    radius: ['60%', '80%'],
                    center: ['50%', '50%'],
                    data: echartData,
                    hoverAnimation: false,
                    label: {
                        show: false,
                    },
                },
                {
                    type: 'pie',
                    startAngle: (90 + (1 - result.rate) * 360),
                    radius: ['62%', '77%'],
                    center: ['50%', '50%'],
                    data: echartData2,
                    hoverAnimation: false,
                    label: {
                        show: false,
                    },
                },
                {
                    name: '',
                    type: 'pie',
                    startAngle: 90,
                    radius: '45%',
                    animation: false,
                    hoverAnimation: false,
                    center: ['50%', '50%'],
                    itemStyle: {
                        normal: {
                            labelLine: {
                                show: false,
                            },
                            color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                                {
                                    offset: 1,
                                    color: 'rgba(50,171,241, 1)',
                                },
                                {
                                    offset: 0,
                                    color: 'rgba(55,70,130, 0)',
                                },
                            ]),
                            shadowBlur: 10,
                        },
                    },
                    data: [
                        {
                            value: 100,
                        },
                    ],
                },
            ],
        };
        // 累计注册
        function getValue(value, arr, params = 'params', key = 'key') {
            const option = arr.find(r => r[key] === value) || {}
            return option[params]
        }
        let dataArr = [
            {
                value: 3000,
                name: "白金会员",
                percent: '56%',
                color: "#4FACFE"
            },
            {
                value: 1632,
                name: "黑金会员",
                percent: '44%',
                color: "#0380FF"
            },
        ]
        let addRegister = {
            title: [{
                text: '',
                top: '5%',
                left: '50%',
                textAlign: 'center',
                textStyle: {
                    color: '#fff',
                    fontWeight: 500,
                    fontSize: 22
                }
            }, {
                text: '累计总量',
                top: '40%',
                textAlign: "center",
                left: "39.5%",
                textStyle: {
                    color: '#F0F2F5',
                    fontSize: 18,
                }
            }, {
                text: '543212',
                top: '50%',
                textAlign: "center",
                left: "39.5%",
                textStyle: {
                    fontWeight: '400',
                    color: '#F0F2F5',
                    fontSize: 22,
                }
            }, {
   
                top: '52%',
                textAlign: "center",
                left: "39.5%",
                textStyle: {
                    color: 'rgba(240, 242, 245, 0.6)',
                    fontSize: 18,
                }
            }],
            legend: {
                icon: "circle",
                right: 90,
                top: 'center',
                itemGap: 20,
                left:'65%',
                itemWidth: 8,
                itemHeight: 8,
                orient: "vertical",
                textStyle: { fontSize: 14, color: "#fff" },
                formatter: (name) => {
                    return '{name|' + name + '} {value|' + getValue(name, dataArr, 'value', 'name') + '} {percent|' + getValue(name, dataArr, 'percent', 'name') + '}'
                },
                textStyle: {
                    rich: {
                        name: {
                            fontSize: 16,
                            fontWeight: 400,
                            verticalAlign: 'top',
                            align: 'center',
                            lineHeight: 14,
                            color: '#fff',
                        },
                        value: {
                            fontSize: 16,
                            fontWeight: 400,
                            align: 'center',
                            lineHeight: 14,
                            color: '#fff',
                            width: 50
                        },
                        percent: {
                            fontSize: 18,
                            lineHeight: 14,
                            fontWeight: 'bold',
                            color: '#0FD7D5',
                        },
                    }
                }
            },

            color: ["#4FACFE", "#0380FF", "#FEDC45"],
            grid: {
                left: 10,
                right: 10,
                top: 40,
                bottom: 20,
                containLabel: true
            },
            series: [{
                name: "",
                type: "pie",
                radius: ["45%", "65%"],
                center: ["40%", "50%"],
                roseType: "area",
                zlevel: 10,
                
                itemStyle: {
                    borderRadius: 0,
                    normal: {
                        borderWidth: 5,
                        borderColor: "#1A2361"
                    },
                    
                    
                },
                label: {
                    normal: {
                        show: false,
                    },
                },

                data: dataArr,
            },
            {
                name: "",
                type: 'gauge',
                splitNumber: 80, //刻度数量
                radius: '40%', //图表尺寸
                center: ['40%', '50%'],
                zlevel: 10,
               
                startAngle: 90,
                endAngle: -269.9999,
                axisLine: {
                    show: false,
                    lineStyle: {
                        width: 0,
                        shadowBlur: 0,
                        color: [
                            [1, '#253D7B']
                        ]
                    }
                },
                axisTick: {
                    show: false,
                    lineStyle: {
                        color: 'auto',
                        width: 2
                    },
                    length: 20,
                    splitNumber: 5
                },
                splitLine: {
                    show: true,
                    length: 5,
                    lineStyle: {
                        color: 'auto',
                    }
                },
                axisLabel: {
                    show: false
                },
                pointer: { //仪表盘指针
                    show: 0,
                },
                detail: {
                    show: 0,
                },
            }, {
                type: 'pie',
                radius: ["30%", "45%"],
                center: ['40%', '50%'],
                hoverAnimation: false,
                zlevel: 1,
                
                labelLine: {
                    normal: {
                        show: false,
                        length: 30,
                        length2: 55
                    },
                    emphasis: {
                        show: false
                    }
                },
                name: "",
                data: [{
                    name: '',
                    value: 0,
                    itemStyle: {
                        normal: {
                            color: "#15296B"
                        }
                    }
                }]
            }],
        };

        totalRegister.setOption(Register);
        totalMoney.setOption(Money);
        addtotalRegister.setOption(addRegister);
        totalNum.setOption(totalPayment);
    })
    return (
        <div className='nowdate'>
            <header>
                <h2>实时概况</h2>
                <div className="new-date">更新时间：{new Date().toLocaleString()}</div>
            </header>
            <div className="title-data">
                <div id='totalRegister'></div>
                <div id='addRegister'></div>

            </div>
            <div className='payment' >
                <div id='total-num'></div>
                <div id='total-money'></div>
            </div>
        </div>
    );
}

export default Nowdate;